
<template>
  <div class="container">
    <div class="total">
      <!-- 面包屑 -->
      <div class="crumbs" v-if="$route.query.name">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/subjects/list' }"
            >学科管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/subjects/list' }">{{
            $route.query.name
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/subjects/directorys' }"
            >目录</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <el-row style="height: 50px" class="father">
        <el-col :span="15" class="Df" justify="start">
          <div class="search">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="目录名称">
                <el-input
                  v-model="getDataList.directoryName"
                  placeholder="目录名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="getDataList.state" placeholder="请选择">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="background-color: grey"
                  >清除</el-button
                >
              </el-form-item>
              <el-form-item>
                <!-- 调用特定的接口查询 -->
                <el-button type="primary" @click="getOneData()">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!-- <el-col :span="4" justify="end">
        </el-col> -->
        <el-col :span="8">
          <el-row type="flex" justify="end" class="end">
            <!-- 搜索区域 -->
            <div class="sub">
              <router-link
                to="/subjects/list"
                class="text"
                v-if="$route.query.name"
                >←返回学科</router-link
              >
            </div>
            <!-- 新增按钮子组件 -->
              <el-button type="success" class="button" @click="addmat">
                <span class="el-icon-edit">新增目录</span></el-button
              >

            <directorysAdd
              :name="'新增目录'"
              @dal="aaaa"
              @update-list="getOneData"
              :dialog-visible="dialogVisible"
              :subjectID="id"
            ></directorysAdd>
            <directorysAdd
              :name="'修改目录'"
              @dal="aaaa1"
              @update-list="getOneData"
              :dialog-visible="dialogVisible1"
              :subjectID="id"
              :getDirId="getDirId"
              :subjectid-d="subjectidD"
              :subject-namee="subjectNamee"
            ></directorysAdd>
          </el-row>
        </el-col>
      </el-row>

      <!-- 统计 -->
      <div class="Statistics">
        <div class="number">
          <span class="el-icon-warning"></span>
          数据一共{{ total }}条
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 表格数据 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
          ></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span>{{ times(scope) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试数题量" width="100px">
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 0">已禁用</span>
              <span v-if="scope.row.state == 1">已启用</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="Vdisable(scope.row)"
                v-if="scope.row.state == 1"
                >禁用</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="Vdisable(scope.row)"
                v-if="scope.row.state == 0"
                >启用</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="Vedit(scope.row)"
                :disabled="scope.row.state ? true : false"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="Vdelete(scope.row)"
                :disabled="scope.row.state ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="end1">
          <div class="block">
            <!--
            page-sizes更改后会 触发 size-change 修改data中的pagesize的值，重新获取数据
            current-page更改后会触发 current-change 修改data中的page的值，重新获取数据

            current-page 是当前页
            page-size 是当前页显示多少条数据
            total 是所有数据条数

          -->
            <el-pagination
              background
              @size-change="isSize"
              @current-change="isPage"
              :current-page="getDataList.page"
              :page-sizes="[2, 5, 10, 20, 50]"
              :page-size="getDataList.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import { list, changeState, remove, add } from '@/api/hmmm/directorys.js'
import directorysAdd from '../components/directorys-add.vue'
export default {
  components: { directorysAdd },
  data () {
    return {
      subjectNamee: '',
      getDirId: '',
      subjectidD: '',
      dialogVisible1: false,
      // 搜索区域
      formInline: {
        user: '',
        region: ''
      },

      // 目录获取
      getDataList: {
        page: 1,
        pagesize: 10,
        subjectID: this.getID,
        directoryName: null,
        state: null
      },
      total: 0,
      // 控制弹窗关闭显示
      dialogVisible: false,
      // 表格
      tableData: [],
      id: ''
    }
  },
  computed: {
    times () {
      // return dayjs(date.row.dataDate).format('YYYY年-MM月-DD日 HH时:mm分:ss秒')
      return function (date) {
        return dayjs(date.row.addDate).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    getID () {
      return this.$route.query ? this.$route.query.id : null
    }
  },
  watch: {
    $route: {
      handler () {
        if (!this.$route.query.id && !this.$route.query.name) {
          this.getOneData()
        }
      },
      // 深度侦听
      // deep:ture,
      // 立即侦听
      immediate: true
    }
  },
  mounted () {
    this.id = this.$route.query.id
    console.log(typeof this.id)

    this.getOneData()
  },
  methods: {
    getsubjectList (value) {
      this.getsubjectList = value
    },
    // 清除数据函数
    onSubmit () {
      this.getDataList.directoryName = ''
      this.getDataList.state = ''
      // this.$message('数据已清除')
      this.getOneData()
    },
    // // 获取目录列表数据（全部的）
    // async getData(){
    //   // 请求数据
    //   let data;
    //   // 判断this.getDataList的 目录名字 或者 状态信息,如果有一条不是空值的话,直接将this.getDataList当作参数发送给服务器
    //   if (this.getDataList.directoryName !== "" || this.getDataList.state !== ""){
    //     data = await list(this.getDataList);
    //   }else{
    //     // 如果 目录名字和 状态信息如果都为空的话就直接传递 当前页和一页显示多少条数据这两个参数
    //     data = await list({page:this.getDataList.page,pagesize:this.getDataList.pagesize})}
    //   // 判断是否成功
    //   if (data.status !== 200) return this.$message({
    //     message:"获取目录失败",
    //     type:"error"
    //   })
    //   // 成功状态
    //   this.$message({message:"获取目录成功",type:"success"})
    //   // 将数据赋值生成模板
    //   this.tableData = data.data.items
    //   this.total = data.data.counts  // 将总数据条数保存到data中

    // },
    //* ****************************************************************** */
    isPage (page) {
      // 重新修改当前页 ，重新调用获取数据
      this.getDataList.page = page
      this.getOneData()
    },
    isSize (size) {
      // 重新修改当前显示多少条 ，重新调用获取数据
      this.getDataList.pagesize = size
      this.getDataList.page = 1
      this.getOneData()
    },
    // 查询函数
    async getOneData () {
      if (this.$route.query.id) {
        this.getDataList.subjectID = this.$route.query.id
        console.log(this.getDataList)
        const data = await list({
          page: this.getDataList.page,
          pagesize: this.getDataList.pagesize,
          subjectID: this.getDataList.subjectID
        })
        this.total = data.data.counts
        this.tableData = data.data.items
        return
      }

      // 发送请求
      let data
      // 判断this.getDataList的 目录名字 或者 状态信息,如果有一条不是空值的话,直接将this.getDataList当作参数发送给服务器
      if (
        this.getDataList.directoryName === '' &&
        this.getDataList.state === ''
      ) {
        console.log('都为空')
        // 如果 目录名字和 状态信息如果都为空的话就直接传递 当前页和一页显示多少条数据这两个参数
        data = await list({
          page: this.getDataList.page,
          pagesize: this.getDataList.pagesize
        })
      } else if (this.getDataList.directoryName === '') {
        console.log(this.getDataList, 'getDataList')
        console.log('name为空')
        const { page, pagesize, state } = this.getDataList
        data = await list({ page, pagesize, state })
      } else if (this.getDataList.state === '') {
        console.log(this.getDataList, 'getDataList')
        console.log('state为空')
        const { page, pagesize, directoryName } = this.getDataList
        data = await list({ page, pagesize, directoryName })
      } else if (
        this.getDataList.directoryName !== '' &&
        this.getDataList.state !== ''
      ) {
        console.log('都不为空')
        data = await list(this.getDataList)
      }
      console.log(data)
      // if (data.status !== 200) {
      //   return this.$message({
      //     message: '获取目录失败',
      //     type: 'error'
      //   })
      // }
      // 成功状态
      // this.$message({ message: '获取目录成功', type: 'success' })
      // 将数据赋值生成模板
      this.tableData = data.data.items
      this.total = data.data.counts // 将总数据条数保存到data中
      console.log(this.tableData, '-******************  ')
    },
    // 新增按钮点击 弹窗开启
    addmat () {
      this.dialogVisible = true
    },
    aaaa (value) {
      this.dialogVisible = value
      this.getOneData()
    },
    aaaa1 (value) {
      this.dialogVisible1 = value
    },
    // 新增目录按钮功能实现
    async getSubjectName (valid) {
      await add(this.sizeForm)
      // this.getOneData()
      // 这里通过接口添加目录
    },
    Vedit (scope) {
      this.dialogVisible1 = true // 显示提示框
      console.log(scope, 'scope')
      this.getDirId = `${scope.id}` // 将id传给子组件
      this.subjectNamee = `${scope.directoryName}`
      this.subjectidD = `${scope.subjectID}` // 将当前获取的nameid传给子组件
    },
    // 禁用启用数据
    async Vdisable (scope) {
      // 禁用和启用
      // 请求api接口
      const data = await changeState({
        id: scope.id,
        state: scope.state ? 0 : 1
      })
      // 判断是否时200
      if (data.status !== 200) {
        return this.$message({ type: 'error', message: '启用失败' })
      }
      // 提示成功
      this.$message({ type: 'success', message: '启用成功' })
      // 重新渲染数据表格
      this.getOneData()
    },
    // 删除数据
    async Vdelete (scope) {
      // 弹出提示框确认是否删除
      const value = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        // 取消删除
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // 判断是否确认
      if (value === 'confirm') {
        // 确认删除直接请求api接口
        const data = await remove(scope)
        if (this.tableData.length === 1) {
          this.getDataList.page--
        }
        // 判断结果是否时200
        if (data.status !== 200) { return this.$message({ type: 'error', message: '删除失败' }) }
        this.$message({ type: 'success', message: '删除成功' })
        // 重新渲染数据表格
        this.getOneData()
      }
    },
    closeDialog () {
      this.dialogVisible = false
    }
  }
}

</script>

<style scoped lang="scss">
//全
.container {
  padding-left: 10px;
  padding-right: 10px;
}
//和
.total {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  width: 100%;
  background-color: #fff;
}
//面包屑导航切换
::v-deep {
  .el-breadcrumb__inner {
    color: black;
  }
  .crumbs {
    padding-top: 20px;
    padding-left: 20px;
  }
}
//搜索
.search {
  padding-top: 30px;
  padding-left: 20px;
}
// .end {
// margin-top: 30px;
// }
.el-icon-warning {
  color: rgb(144, 147, 153);
  font-size: 14px;
}
.text {
  background-color: #fff;
  color: rgb(108, 180, 252);
  border: none;
  // margin-left: 500px;
  // margin-right: 20px;
  padding-left: 10px;
  font-size: 12px;
}
.button {
  margin-top: 28px;
  height: 40px;
}
.sub {
  margin-top: 20px;
  padding-left: 20px;
  width: 100px;
  height: 40px;
  padding-top: 19px;
  // background-color: aqua;
}
//统计
.Statistics {
  margin-top: 50px;
  font-size: 12px;
  padding-left: 20px;
  padding-right: 20px;
}
.number {
  background-color: rgb(244, 244, 245);
  color: rgb(144, 147, 153);
  border-radius: 5%;
  height: 30px;
  width: 100%;
  padding-top: 9px;
  padding-left: 20px;
}
//内容区域
.content {
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.end1 {
  position: relative;
  height: 80px;
}
//分页
.block {
  position: absolute;
  // padding-left: 20px;
  // margin-left: 955px;
  right: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
